<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
    <input type="checkbox" v-model="checkedAll" id="all" @click="selectAll()">
    <label for="all">全选:</label>
    <br>
    <hr/>
    <template v-for="(item, index) in hobby">
        <input type="checkbox" :value="item" :id="index" v-model="myHobbyies" />
        <label :for="index">{{item}}</label>
        <br>
    </template>
    <br>
    <p>选择了:{{ myHobbyies }}</p>
</div>
<script src="./js/vue.js"></script>
<script>
    const app = new Vue({
    el: '#app',
    data: {
        myHobbyies:[],
        checkedAll:false,
        hobby:["篮球","足球","排球","羽毛球","乒乓球","台球"]
    },
    methods:{
        selectAll:function(){
            if(this.checkedAll){
                // 全不选
                this.myHobbyies = [];
            }else{
                // 全选
                this.myHobbyies = [];
                this.hobby.forEach((item)=>{
                    this.myHobbyies.push(item);
                })
            }
        }
    },
    watch:{
        myHobbyies: function(){
            let self = this;
            if(this.myHobbyies.length === this.hobby.length){
                self.checkedAll = true;
            } else{
                self.checkedAll = false;
            }
        }
    }

})
</script>

</body>
</html>
